package myJs.wechatMember.sampleView

import myJs.CpLayer
import myJs.api.Api
import myJs.common.LabAppendViewCp
import myJs.cps._
import myJs.myPkg.antdMobile._
import myJs.myPkg.jquery._
import myJs.myPkg.{ReactRouterDOM, layer}
import myJs.tool.Tool
import myJs.wechatMember.viewTest.ViewTest
import org.scalajs.dom.{URLSearchParams, html}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Sample.SampleInfo
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.{Fragment, React, ReactElement}
import slinky.web.html._


/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  val curPage = SampleView
  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val curId = searchParams.get("id")

    val (idV, setIdV) = useState(curId)
    val (sampleInfo, setSampleInfo) = useState(SampleInfo())

    object FTool {

      def refreshSampleInfo = {
        val options = Tool.layerOptions.copy(shade = List("0.1", "#fff"))
        val index = layer.load(0, options)
        Api.sample.getOpById(idV).map { curSampleInfoOp =>
          curSampleInfoOp.foreach { curSampleInfo =>
            setSampleInfo(curSampleInfo)
          }
          layer.close(index)
        }
      }

    }

    useEffect(() => {
      FTool.refreshSampleInfo.map { x =>
        $("body").scrollTop(0)
      }
    }, List()
    )

    val imageViewCp = ImageViewMobileCp(id = sampleInfo.id, images = sampleInfo.serverImages): ReactElement

    if (sampleInfo.id.isEmpty) {
      NavBar(
        back = null
      )("该样本信息还未录入！")
    } else {
      div(
        NavBar(
          back = null
        )(curPage.titleStr),

        div(style := Style(marginTop = 45),
          Card(
            title = "基本信息",
          )(
            Grid(
              columns = 5
            )(
              Grid.Item(
                "样本编号:"
              ),
              Grid.Item(
                span = 4
              )(
                idV
              ),
              Grid.Item(
                "日期:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.date
              ),
              Grid.Item(
                "地点:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.address
              ),
              Grid.Item(
                "海拔:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.elevation
              ),
              Grid.Item(
                "样线号:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.sampleLineNumber
              ),
              Grid.Item(
                "经度:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.longitude
              ),
              Grid.Item(
                "纬度:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.latitude
              ),
              Grid.Item(
                "样品类型:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.sampleType
              ),
              Grid.Item(
                "样品照片:"
              ),
              Grid.Item(
                span = 4
              )(
                imageViewCp
              ),
              Grid.Item(
                "新鲜程度:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.freshness
              ),
              Grid.Item(
                "采集人:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.gatherer
              ),
              Grid.Item(
                "天气:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.weather
              ),
            )
          ),
          Card(
            title = "冰箱信息",
          )(
            Grid(
              columns = 5
            )(
              Grid.Item(
                "冰箱编号:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.freezerNumber
              ),
              Grid.Item(
                "层数:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.freezerLayerNumber
              ),
              Grid.Item(
                "行数:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.rowNumber
              ),
              Grid.Item(
                "列数:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.colNumber
              ),
              Grid.Item(
                "备注:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.comments.zipWithIndex.map { case (commentData, curI) =>
                  Fragment(key := s"${curI}",
                    span(s"${commentData.time} 样本${commentData.method}${commentData.amount} 实验员：${commentData.tester}"),
                    br()
                  )
                }
              ),
            )
          ),

          Card(
            title = "实验信息",
          )(
            Grid(
              columns = 5
            )(
              Grid.Item(
                "出库时间:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.lab.exWareHouseTime
              ),
              Grid.Item(
                "入库时间:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.lab.wareHouseTime
              ),
              Grid.Item(
                "样本增耗量:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.lab.amount
              ),
              Grid.Item(
                "样本组成:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.lab.compose
              ),
              Grid.Item(
                "实验人员:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.lab.tester
              ),
              Grid.Item(
                "性别鉴定:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.lab.sex
              ),
              Grid.Item(
                "咬节长度:"
              ),
              Grid.Item(
                span = 4
              )(
                sampleInfo.lab.bambooLength
              ),
              Grid.Item(
                "附件:"
              ),
              Grid.Item(
                span = 4
              )(
                LabAppendViewCp(serverFiles = sampleInfo.lab.files,
                  id = sampleInfo.id, show = false)
              ),
            )
          ),

          Card(
            title = "测试信息",
          )(
            sampleInfo.tests.zipWithIndex.map { case (testData, curI) =>

              Grid(
                key = s"${curI}",
                columns = 5
              )(

                Grid.Item(
                  "测试类型:"
                ),
                Grid.Item(
                  span = 4
                )(
                  testData.testType
                ),
                Grid.Item(
                  "公司:"
                ),
                Grid.Item(
                  span = 1
                )(
                  testData.company
                ),
                Grid.Item(
                  span = 3
                )(
                  a(
                    href := s"${ViewTest.absolutePath}?sampleId=${sampleInfo.id}&testType=${testData.testType}&company=${testData.company}",
                    ">>测试详情")
                ),
                if (curI == sampleInfo.tests.size - 1) {
                  null
                } else {
                  Grid.Item(
                    span = 5
                  )(
                    Divider(),
                  )
                }
              )
            },

          ),
        )


      )
    }

  }


}
